<template>
  <div class="resource-building-grid">
    <!-- 说明文字 -->
    <div class="description-box">
      <p class="description-text">
        资源分为木材、泥土、铁矿和粮食四种，资源建筑物会持续生产四种资源。不断提升资源建筑的等级，可增加资源产量，这对城池的长期发展至关重要。(资源为城池根基所在)
      </p>
    </div>

    <!-- 资源建筑网格 -->
    <div class="building-grid">
      <!-- 木材建筑列 -->
      <BuildingColumn 
        :buildings="resourceBuildings.wood" 
        resource-type="wood" 
        building-type="woodMill"
        @building-click="handleBuildingClick"
        :icon="iconMap.wood" 
      />

      <!-- 泥土建筑列 -->
      <BuildingColumn 
        :buildings="resourceBuildings.soil" 
        resource-type="soil" 
        building-type="soilMine"
        @building-click="handleBuildingClick"
        :icon="iconMap.soil" 
      />

      <!-- 铁矿建筑列 -->
      <BuildingColumn 
        :buildings="resourceBuildings.iron" 
        resource-type="iron" 
        building-type="ironMine"
        @building-click="handleBuildingClick"
        :icon="iconMap.iron" 
      />

      <!-- 粮食建筑列 -->
      <BuildingColumn 
        :buildings="resourceBuildings.food" 
        resource-type="food" 
        building-type="farm"
        @building-click="handleBuildingClick"
        :icon="iconMap.food" 
      />
    </div>
  </div>
</template>

<script>
import BuildingColumn from './BuildingColumn.vue'

export default {
  name: 'ResourceBuildingGrid',
  components: {
    BuildingColumn
  },
  props: {
    //=== resourceBuildings 资源建筑数据
    resourceBuildings: {
      type: Object,
      required: true
    }
  },
  emits: ['building-click'],
  data() {
    return {
      //=== iconMap 资源类型图标映射
      iconMap: {
        wood: `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36" height="36" viewBox="0 0 36 36">
	<defs>
		<clipPath id="clipPath5776983347">
			<path d="M0 0L36 0L36 36L0 36L0 0Z" fill-rule="nonzero" transform="matrix(1 0 0 1 0 0)"/>
		</clipPath>
	</defs>
	<g clip-path="url(#clipPath5776983347)">
		<path d="M16.553 0L0.672891 20.1101L3.46078 20.1101L8.7975 12.7835L9.82406 13.5288L5.02172 20.1101L6.95531 20.1101L8.93813 17.9726L8.82563 20.1101L17.0381 20.1101L30.7912 0L27.2334 0L16.6866 15.4624L15.6459 14.7452L25.7077 0L23.2537 0L19.8928 4.67648L18.8663 3.93117L21.6928 0L16.553 0ZM31.3608 1.41258L18.0014 20.9398L18.0014 23.0984L22.8459 16.0109L23.8866 16.728L18.0014 25.3343L18.0014 27.6054L31.3608 7.05305L31.3608 6.23039L29.8139 6.6382L31.3608 4.2968L31.3608 1.41258ZM0 21.3757L0 29.1101L1.67555 29.1101L2.41664 26.4312L3.19922 29.1101L5.84438 29.1101C5.68969 28.7093 5.60531 28.2804 5.60531 27.8304C5.60531 26.5226 6.33656 25.3695 7.42641 24.5749C8.51625 23.7874 9.97172 23.3234 11.5678 23.3234C13.1639 23.3234 14.6194 23.7874 15.7092 24.5749C16.103 24.8632 16.4545 25.2007 16.7358 25.5734L16.7358 21.3757L0 21.3757ZM11.5678 24.589C10.2178 24.589 9.00844 24.9898 8.17172 25.6015C7.32797 26.2132 6.87094 26.9937 6.87094 27.8304C6.87094 28.2804 7.00453 28.7093 7.25766 29.1101L8.40375 29.1101C8.17172 28.7796 8.02406 28.3999 8.02406 27.9781C8.02406 27.1905 8.52328 26.5437 9.18422 26.1288C9.83813 25.707 10.6819 25.482 11.603 25.482C12.5241 25.482 13.3678 25.707 14.0217 26.1288C14.6827 26.5437 15.1819 27.1906 15.1819 27.9781C15.1819 28.3999 15.0342 28.7796 14.8022 29.1101L15.878 29.1101C16.1311 28.7093 16.2647 28.2804 16.2647 27.8304C16.2647 26.9937 15.8077 26.2132 14.9639 25.6015C14.1272 24.9898 12.9178 24.589 11.5678 24.589ZM11.603 26.7476C10.8998 26.7476 10.267 26.9374 9.85922 27.1976C9.45141 27.4577 9.28969 27.732 9.28969 27.9781C9.28969 28.2241 9.45141 28.4984 9.85922 28.7585C10.0913 28.9062 10.3936 29.0327 10.7381 29.1101L12.4678 29.1101C12.8123 29.0327 13.1147 28.9062 13.3467 28.7585C13.7545 28.4984 13.9163 28.2241 13.9163 27.9781C13.9163 27.732 13.7545 27.4577 13.3467 27.1976C12.9389 26.9374 12.3061 26.7476 11.603 26.7476Z" fill-rule="nonzero" transform="matrix(1 0 0 1 2.31891 3.44461)" fill="rgb(255, 185, 0)"/>
	</g>
</svg>
`,
        soil: `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36" height="36" viewBox="0 0 36 36">
	<defs>
		<clipPath id="clipPath7910379680">
			<path d="M0 0L36 0L36 36L0 36L0 0Z" fill-rule="nonzero" transform="matrix(1 0 0 1 0 0)"/>
		</clipPath>
	</defs>
	<g clip-path="url(#clipPath7910379680)">
		<path d="M6.61078 1.12653e-05C4.61391 -0.00701988 2.65852 3.24353 3.36727 5.12509C4.20961 7.35399 8.74125 8.87275 10.253 7.03056C11.9123 4.99853 9.32484 0.148371 6.70922 0.0028241L6.61078 0.0028241L6.61078 1.12653e-05ZM6.57563 1.3247L6.63891 1.3247C6.82172 1.33173 7.05375 1.36337 7.09594 1.55181C7.28578 2.42228 5.23969 5.05478 4.89516 4.91415C4.22156 4.63993 4.41 3.29415 4.78266 2.6522C5.10609 2.07634 5.94984 1.3465 6.57563 1.3247ZM23.092 1.39571C19.717 1.4372 15.2452 3.23931 15.2873 6.79853C15.3366 11.5938 22.2975 13.5063 26.2491 12.7118C28.2178 12.3251 30.6436 10.2017 30.6014 7.81806C30.5452 4.58368 27.135 1.90759 24.4561 1.48571C24.0342 1.41962 23.5772 1.39009 23.092 1.39571ZM20.3006 3.15704C20.6873 3.15001 21.3623 3.27798 21.1936 3.61056C20.5186 4.94931 17.8467 8.08525 17.228 7.41728C16.5389 6.679 17.017 5.16728 17.6991 4.429C18.2616 3.8215 19.4358 3.16618 20.3006 3.15704ZM8.91 10.9962C8.24203 11.0102 7.62328 11.172 7.11 11.5095C5.59828 12.5079 5.16234 16.5579 6.25219 18.3017C8.34047 21.6204 15.0905 22.2954 15.8498 18.0415C16.5037 14.3852 12.1303 10.947 8.91 10.9962ZM9.09281 11.847C9.31781 11.8399 9.62016 11.9384 9.63422 12.2407C9.70453 13.6329 8.09438 16.9798 7.2225 16.2977C6.63891 15.8407 6.93422 14.0899 7.34906 13.3024C7.71469 12.6274 8.50922 11.854 9.09281 11.847ZM22.9303 15.7704C22.4803 15.7704 22.0655 15.8407 21.6928 15.9954C19.6256 16.8462 19.3444 20.7345 21.0389 22.0845C23.0006 23.6735 28.253 22.9071 28.7803 20.5798C29.2795 18.372 25.6373 15.7774 22.9303 15.7704ZM22.86 16.4102C23.0006 16.4173 23.1975 16.4384 23.2397 16.6071C23.4928 17.6196 22.4873 20.847 21.5452 20.5938C20.8702 20.411 20.9053 18.8782 21.1795 18.1188C21.4537 17.3946 22.2553 16.3892 22.86 16.4102ZM4.33969 21.0157C1.80141 21.0017 -0.799452 25.1079 0.231329 27.4282C1.47234 30.2196 7.57406 31.4642 9.2686 28.9259C10.9913 26.3384 7.44047 21.0368 4.33969 21.0157ZM4.635 22.0212C4.95141 22.0142 5.35219 22.1548 5.32406 22.5556C5.1975 24.3837 2.81742 27.9767 1.9125 26.9923C1.31203 26.3384 1.84992 24.3696 2.45039 23.4977C2.95031 22.7946 3.94313 22.0282 4.635 22.0212Z" fill-rule="nonzero" transform="matrix(1 0 0 1 2.69859 2.84835)" fill="rgb(255, 185, 0)"/>
	</g>
</svg>`,
        iron: `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36" height="36" viewBox="0 0 36 36">
	<defs>
		<clipPath id="clipPath3497661931">
			<path d="M0 0L36 0L36 36L0 36L0 0Z" fill-rule="nonzero" transform="matrix(1 0 0 1 0 0)"/>
		</clipPath>
	</defs>
	<g clip-path="url(#clipPath3497661931)">
		<path d="M23.19 0L20.8631 5.86223L28.6788 13.6866L32.7724 9.5888L23.19 0ZM11.9159 0.366891C5.00766 5.076 0.182813 11.7045 0 20.6806C4.37695 12.256 11.4228 4.85381 17.9452 1.7138L11.9159 0.366891ZM5.26036 1.45448L3.18171 3.5332C3.6933 4.02258 4.20335 4.51005 4.71544 4.99873C5.3403 4.26818 6.00708 3.56787 6.7062 2.89589L5.26036 1.45448ZM30.1378 1.45448L28.3185 3.27164L30.3377 5.29313C30.9642 4.70531 31.5908 4.11694 32.2165 3.5287L30.1378 1.45448ZM11.5797 7.76503C10.9159 8.36634 10.2561 9.00225 9.60651 9.6679C11.3828 11.3645 13.1591 13.0656 14.9283 14.7831L16.7697 12.9461L11.5797 7.76503ZM22.3595 9.22191L3.16856 28.3841L5.22963 30.4386C11.0993 23.6795 17.5875 17.3255 24.2008 11.0653L22.3595 9.22191ZM20.3732 16.5453C19.762 17.1373 19.1533 17.7303 18.5472 18.3252C22.4774 22.2191 26.3635 26.225 30.1598 30.4497L32.2296 28.3843L20.3732 16.5453Z" fill-rule="nonzero" transform="matrix(1 0 0 1 1.61269 2.77523)" fill="rgb(255, 185, 0)"/>
	</g>
</svg>

`,
        food: `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36" height="36" viewBox="0 0 36 36">
	<defs>
		<clipPath id="clipPath2046538083">
			<path d="M0 0L36 0L36 36L0 36L0 0Z" fill-rule="nonzero" transform="matrix(1 0 0 1 0 0)"/>
		</clipPath>
	</defs>
	<g clip-path="url(#clipPath2046538083)">
		<path d="M5.76127 0C4.4498 1.90526 3.66272 3.67889 3.45192 5.12381L5.13506 7.87704L7.14769 5.52368C7.20872 4.03214 6.76167 2.10108 5.76127 0ZM32.0691 0.206508C30.068 1.36174 28.5965 2.6235 27.7844 3.83639L28.1184 7.04883L30.9485 5.78756C31.6439 4.4673 32.0692 2.5328 32.0691 0.206508ZM25.6179 2.12463C24.9041 3.60373 24.4367 4.99619 24.2007 6.22483L25.4927 10.2809L26.8835 7.87268L26.4265 3.49784L26.4286 3.49784C26.188 3.0484 25.9187 2.59038 25.6179 2.12463ZM0.762469 4.50661C0.75368 6.14939 0.930726 7.60753 1.24587 8.81775L4.15505 11.9223L4.37477 9.15159L2.08083 5.39873L2.08294 5.39648C1.67302 5.09505 1.23356 4.79742 0.762469 4.50661ZM10.1031 5.24714C9.51138 5.49351 8.95767 5.7543 8.44411 6.02719L5.68434 9.25945L5.4668 12.0279L9.01322 9.27914C9.48516 8.16089 9.8633 6.79971 10.1031 5.24714ZM22.5638 6.76772C20.8747 10.8522 21.4276 13.6485 23.1174 14.3966L24.605 11.8214L23.2273 7.50157C23.0183 7.25829 22.7978 7.01339 22.5638 6.76772ZM32.8316 6.78305C32.5117 6.78108 32.2009 6.78895 31.8978 6.80273L28.0216 8.52975L26.6308 10.9401L31.0143 9.97994C31.9211 9.17346 32.8487 8.1078 33.7323 6.80927C33.4259 6.79409 33.1248 6.7848 32.8316 6.78305ZM16.9343 7.39617C15.3003 9.03009 14.204 10.6308 13.733 12.0125L14.8887 15.0294L17.2948 13.0783C17.6249 11.6225 17.5364 9.64308 16.9343 7.39617ZM0 10.0105C0.230625 14.424 1.93233 16.712 3.7793 16.6617L4.01442 13.6931L0.916242 10.3884C0.622688 10.2587 0.317531 10.132 0 10.0105ZM10.0702 10.8103C9.61615 10.9055 9.18211 11.014 8.76938 11.1312L5.32617 13.7987L5.0933 16.7342C6.95602 17.2623 9.11236 15.2881 10.0702 10.8103ZM11.1994 10.9202C10.8928 12.5328 10.8021 13.9972 10.8918 15.2445L13.1902 18.8304L13.9088 16.1453L12.3333 12.0364L12.3354 12.0364C11.9872 11.6652 11.6099 11.2917 11.1994 10.9202ZM30.0015 11.5487L25.7432 12.4781L24.2711 15.0269C25.7253 16.3062 28.5206 15.4512 31.3111 11.8189C30.8602 11.7098 30.4238 11.6204 30.0015 11.5487ZM20.25 13.3438C19.6234 13.4788 19.0333 13.6363 18.479 13.8118L15.1765 16.4858L14.4579 19.1711L18.4439 17.1121C19.1114 16.0979 19.7322 14.8276 20.25 13.3438ZM31.1572 15.106C29.3396 16.535 28.0602 17.993 27.4286 19.3094L28.2175 22.4406L30.8387 20.7904C31.3398 19.3848 31.4881 17.4092 31.1572 15.106ZM22.4847 15.7103C20.0635 21.1647 18.3086 26.8942 18.0572 33.5015L19.3734 33.5015C19.6236 27.1177 21.3121 21.5886 23.6844 16.2443L22.4847 15.7103ZM9.45056 16.1959C8.8759 20.5797 10.1336 23.1367 11.9598 23.4205L12.7311 20.5466L10.2833 16.7321C10.0182 16.5514 9.74095 16.3732 9.45056 16.1959ZM25.0424 17.9208C24.5464 19.4848 24.2818 20.9281 24.2227 22.177L26.0794 26.0156L27.1121 23.4337L26.0377 19.1666L26.0419 19.1666C25.7396 18.7554 25.4068 18.3397 25.0424 17.9208ZM3.77494 18.0285C3.16575 23.2727 3.2033 28.4232 4.63191 33.5017L5.99878 33.5017C4.53087 28.5255 4.4685 23.4456 5.08022 18.1801L3.77494 18.0285ZM19.2064 18.8086C18.7414 18.8198 18.2957 18.8466 17.8682 18.8877L13.9988 20.8893L13.2363 23.7305C14.9723 24.5904 17.4507 23.04 19.2064 18.8086ZM33.7413 21.4057C33.1034 21.4651 32.4993 21.55 31.9286 21.6584L28.3317 23.9237L27.299 26.5011L31.5001 24.9323C32.2834 24.0046 33.0509 22.8176 33.7413 21.4057ZM22.6804 22.9526C21.5886 27.2373 22.533 29.9269 24.3129 30.4254L25.4182 27.6635L23.4428 23.5833C23.2016 23.3724 22.9469 23.1625 22.6804 22.9526ZM11.7312 24.7522C10.8401 27.6514 10.1661 30.5563 9.84375 33.5017L11.1665 33.5017C11.4834 30.7087 12.1291 27.9308 12.988 25.1366L11.7312 24.7522ZM30.7156 26.6264L26.6375 28.1514L25.5432 30.8848C27.1643 31.9463 29.8093 30.7015 32.0559 26.7077C31.5923 26.6636 31.1453 26.6372 30.7156 26.6264ZM23.9129 31.8053C23.7811 32.3476 23.6889 32.9132 23.6558 33.5017L24.9697 33.5017C25.0014 33.0315 25.0787 32.5731 25.1895 32.1174L23.9129 31.8053Z" fill-rule="nonzero" transform="matrix(1 0 0 1 1.15355 1.17338)" fill="rgb(255, 185, 0)"/>
	</g>
</svg>
`
      }
    }
  },
  methods: {
    //=== handleBuildingClick 处理建筑点击事件
    handleBuildingClick(building, resourceType) {
      this.$emit('building-click', building, resourceType)
    }
  }
}
</script>

<style scoped>
/* 说明文字样式 */
.description-box {
  @apply bg-gray-700 bg-opacity-50 border border-green-700 border-opacity-30 rounded p-4 mt-4;
}

.description-text {
  @apply text-white text-sm leading-5 m-0;
}

/* 建筑网格样式 */
.building-grid {
  @apply flex gap-4 mt-4;
}
</style>